<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!-- 响应式-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.4/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <title>关于我</title>
</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(5)" class="ui inverted attached  segment m-padded-tb-mini stackable">
</nav>

<!--中间部分-->
<div class="m-container m-container-small m-padded-tb-large">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="eleven wide column">
                <div class="ui segment">
                    <img src="https://unsplash.it/800/870?image=1005" alt="" class="ui rounded image">

                </div>
            </div>
            <div class="five wide column">
                <div class="ui top attached segment">
                    <h4 class="ui header"> 关于我 </h4>
                </div>
                <div class="ui attached segment">
                    <p class="m-text">今年7月，甘肃环县印发了《关于禁止公职人员饮酒的规定（试行）》的通知，要求全县公职人员一切公务活动禁止饮酒。
                    </p>
                    <p class="m-text">该“禁酒令”明确规定，县内公务活动，一律禁止提供任何酒类，一律不得饮用任何单位和个人提供的任何酒类。公职人员不论是正常上班还是节假日值班、执勤或工作日八小时外一律禁止饮酒。确因个人婚丧喜庆等事宜需要饮酒的，必须事前将活动内容、人员范围、饮酒标准等情况向本单位党委（党组）报告。</p>
                </div>
                <div class="ui attached segment">
                    <div class="ui orange label basic">编程</div>
                    <div class="ui orange label basic">写作</div>
                    <div class="ui orange label basic">java</div>
                    <div class="ui orange label basic">编程</div>

                </div>
                <div class="ui attached segment">
                    <div class="ui teal label basic">编程</div>
                    <div class="ui teal label basic">写作</div>
                    <div class="ui teal label basic">java</div>
                    <div class="ui teal label basic">编程</div>
                </div>
                <div class="ui bottom attached segment">
                    <a href="#" class="ui button icon github circular">
                        <i class="github icon"></i>
                    </a>
                    <a href="#" class="ui wechat button icon circular">
                        <i class="wechat icon"></i>
                    </a>
                    <a href="#" class="ui button icon circular qq" data-content="1033021318">
                        <i class="qq icon"></i>
                    </a>
                    <!--微信二维码-->
                    <div class="ui flowing popup transition hidden wechat-qr">
                        <img src="../static/images/WeChat.jpg" class="image rounded " style="width: 100px;height: 100px" alt="">
                    </div>
                    <!--github二维码-->
                    <div class="ui flowing popup transition hidden github-qr">
                        <img src="../static/images/WeChat.jpg" class="image rounded " style="width: 100px;height: 100px" alt="">
                    </div>
                </div>


            </div>
        </div>
    </div>

</div>

<!--尾部-->
<footer th:replace="_fragments :: footer"  class="ui inverted vertical segment m-padded-tb-massive">
</footer>




<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.4/dist/semantic.min.js"></script>
<script>
    $('#newBlog-container').load('/footer/newBlog')

    $('.menu.toggle').click(
        function () {
            $('.m-item').toggleClass('m-mobile-hide');
        }
    )
    $('.qq').popup()

    $('.wechat').popup({
        popup: $('.wechat-qr'),
        position: 'bottom center'
    })

    $('.github').popup({
        popup: $('.github-qr'),
        position: 'bottom center'
    })
</script>
</body>
</html>